@keyframes rainbow {
    0% {
        border-color: $yellow-500;
    }
    20% {
        border-color: $green-500;
    }
    40% {
        border-color: $teal-500;
    }
    80% {
        border-color: $orange-500;
    }
    100% {
        border-color: $yellow-500;
    }
}

@keyframes valid {
    0% {
        border-color: $input-border-color;
    }
    25% {
        border-color: $teal-500;
    }
    50% {
        border-color: $green-500;
    }
    75% {
        border-color: $teal-500;
    }
    100% {
        border-color: $input-border-color;
    }
}

.md-form {
    input[type=date],
    input[type=datetime-local],
    input[type=email],
    input[type=number],
    input[type=password],
    input[type=search-md],
    input[type=search],
    input[type=tel],
    input[type=text],
    input[type=time],
    input[type=url],
    textarea.md-textarea {
        box-shadow: 0 1px 0 0 $gray-a200;
        border-bottom: 1px solid $gray-a200;
    }

    select.form-control--fnd {
        background-color: $gray-a100;
        border-color: $gray-a100;
        color: $gray-600;
        &:active, &:focus {
            background-color: $gray-200;
        }
    }

    label {
        font-weight: $font-weight-bold;
        top: .4rem;
        &.active {
            transform: translateY(-120%);
        }
    }

    .form-control {
        font-weight: $font-weight-semi-bold;
    }
}

.form-control {
    color: $gray-600;
    border-color: $gray-200;
    font-weight: $font-weight-normal;

    &::placeholder,
    &::-webkit-input-placeholder {
        color: $gray-300;
    }

    &:-moz-placeholder,
    &::-moz-placeholder {
        color: $gray-300;
    }

    &::-ms-input-placeholder {
        color: $gray-300;
    }

    &.is-loading {
        border-color: $yellow-500;
        animation: rainbow 1s infinite;
    }

    &.is-valid {
        border-color: $input-border-color;
        animation: valid 1s;
    }

    &--not-editable,
    &--label {
        border-color: transparent;
        cursor: default;
        &[readonly] {
            background-color: transparent;
        }
    }

    &--label[readonly] {
        background-image: none;
    }

    &--not-editable,
    &--instant-edit {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    &--instant-edit:not(:hover,:active,:focus,.is-invalid) {
        border-color: transparent;

        .form-edit & {
            border-color: $input-border-color;
        }
    }

    + .text-danger {
        position: absolute;
        margin-top: 0;
        font-size: $font-size-sm;
    }

    &--readonly-text {
        background-color: $gray-200;
        padding: $input-padding-y-lg;
        min-height: 6rem;

        user-select: none;
        cursor: not-allowed;
    }

    &--search {
        + label {
            width: 100%;

            i {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                right: 0;
            }
        }
    }
}

.control-label--token-type {
    padding: 0 0.625rem !important;
    margin: 0;
    display: flex;
    align-items: center;

    .form-control {
        box-shadow: none;
        border: 0 none;
    }
}